<!--
 * @description: 列表模式
 * @fileName: LensList
 * @author: 17076
 * @date: 2025/3/10-下午5:17
 * @version: V1.0.0
-->

<template>
  <div class="lens-content" :style="{ height: $baseTableHeight(-100) + 'px' }">
    <template v-for="(item, index) in lensData">
      <div
        :id="`lens${item.lensId}`"
        :key="item.lensId"
        :class="['flex-row', 'lens-item', { 'active': selectLensId === item.lensId }]"
        @click="handleSelect(item)"
      >
        <div class="item-left">
          <p class="flex-row">
            <svg-icon icon-class="drag" class="move" />
            <span style="margin: 0 10px">{{ item['index'] }}</span>
            <span>{{ item.name }}</span>
          </p>
          <p class="flex-row details">
            <span style="min-width: 40px">剧情:</span>
            <span>{{ item['plot'] ? item['plot'] : '' }}</span>
          </p>
<!--          <p class="flex-row details">-->
<!--            <span style="min-width: 40px">原文:</span>-->
<!--            <span>{{ item['originalSnippet'] ? item['originalSnippet'][0] : '' }}</span>-->
<!--          </p>-->
          <p class="flex-row details">
            <span style="min-width: 40px">场景:</span>
            <span>{{ item['scenery'] }}</span>
          </p>
          <p v-if="item['roleName'] && item['roleName'].length > 0" class="flex-row details">
            <span style="min-width: 40px">角色:</span>
            <span>{{ formatterRoleName(item['roleName']) }}<i class="view-dialogue" @click="handleViewDialogue(item)">查看对话</i></span>
          </p>
          <p class="flex-row details">
            <span style="min-width: 40px">描述:</span>
            <el-input
              v-if="selectLensId === item.lensId"
              :ref="'desc' + item['lensId']"
              v-model="item['lensDesc']"
              clearable
              placeholder="镜头描述，不作为生成依据，提供售后分镜的制作描述"
              @keyup.enter.native="handleSaveDesc(item)"
            />
            <span v-else style="min-height: 32px">{{ item['lensDesc'] }}</span>
          </p>
          <p>
            <span>时间: {{ item['lensTimeName'] }}</span>
            <span style="margin-left: 10px">景别: {{ item['shotSizeName'] }}</span>
            <!--          <span style="margin-left: 20px">时长: {{ item['lensTimeLength'] }}</span>-->
          </p>
        </div>
        <!--单图-->
        <!--taskStatus 01-成功 02-失败 03-进行中-->
        <div v-if="item['lensImagesList'].length === 1" class="item-single-right">
          <div class="flex-column flex-center item-single-image">
            <div class="item-single-content" :data-ratio="pictureScale">
<!--              <div -->
<!--                v-if="item['lensImagesList'][0]['taskStatus'] === '03' || !item['lensImagesList'][0]['taskStatus']" class="image-item flex-row flex-center">-->
<!--                <i class="el-icon-loading" />-->
<!--              </div>-->
              <img v-if="item['lensImagesList'][0].imageId" :src="downloadUrl + item['lensImagesList'][0].imageId" class="image-item">
              <el-image v-else style="width: 100%; height: 100%">
                <div slot="error" class="flex-column flex-center error-content">
                  <i class="el-icon-picture-outline"/>
                  <span>暂无图片</span>
                </div>
              </el-image>
            </div>
          </div>
          <div style="text-align: right;margin-top: 10px">
            <el-button @click="handleEdit(item)">编辑</el-button>
          </div>
        </div>
        <!--多图-->
        <div v-else class="item-multi-right">
          <div ref="swiper" class="swiper-container">
            <div class="swiper-wrapper">
              <div v-for="(subItem, subIndex) in item['lensImagesList']" :key="subIndex" class="flex-column flex-center swiper-slide">
                <div class="swiper-slide-image" :data-ratio="pictureScale">
                  <img v-if="subItem.imageId" :src="downloadUrl + subItem.imageId" class="image-item">
<!--                  <div v-else class="image-item flex-row flex-center">-->
<!--                    <i class="el-icon-loading" />-->
<!--                  </div>-->
                  <el-image v-else style="width: 100%; height: 100%">
                    <div slot="error" class="flex-column flex-center error-content">
                      <i class="el-icon-picture-outline"/>
                      <span>暂无图片</span>
                    </div>
                  </el-image>
                </div>
              </div>
            </div>
          </div>
          <div class="navigator">
            <svg-icon v-if="item['lensImagesList'] && item['lensImagesList'].length > 1" icon-class="pre" :class="'pre-button' + index" />
            <svg-icon v-if="item['lensImagesList'] && item['lensImagesList'].length > 1" icon-class="next" :class="'next-button' + index" />
            <el-button @click="handleEdit(item)">编辑</el-button>
          </div>
        </div>
      </div>
    </template>
    <el-empty v-if="lensData.length === 0" description="暂无数据" style="height: 100%">
      <template slot="image">
        <img src="@/assets/common/empty_role.png">
      </template>
    </el-empty>
    <!--查看对话-->
    <preview-dialogue ref="view" />
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
import PreviewDialogue from '../others/PreviewDialogue.vue'
import { baseURL } from '@/config'
import { commonDownloadFile } from '@/api/config/uploadApi'
import { mapActions, mapGetters } from 'vuex'
import { saveLensDesc } from '@/api/lens'
export default {
  name: 'LensList',
  components: { PreviewDialogue },
  props: {
    lensData: {
      type: Array,
      default: () => []
    },
    playId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 当前选中的镜头
      selectLensId: null,
      // 图片下载链接
      downloadUrl: baseURL + commonDownloadFile
    }
  },
  computed: {
    // 画面比例
    ...mapGetters({
      pictureScale: 'lens/pictureScale',
      selectLens: 'lens/selectLens'
    })
  },
  watch: {
    // 监听分镜数据
    lensData: {
      handler: function(val) {
        if (val) {
          this.initSwiper()
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    // 判断是否存在选中选中的镜头，如果存在滑动到对应的位置
    if (this.selectLens) {
      this.selectLensId = this.selectLens.lensId
      const el = document.getElementById('lens' + this.selectLens.lensId)
      if (el) {
        el.scrollIntoView()
      }
    }
  },
  methods: {
    ...mapActions({
      changeMode: 'lens/changeMode',
      setSelectLens: 'lens/setSelectLens'
    }),
    // 编辑
    handleEdit(item) {
      this.selectLensId = item.lensId
      this.setSelectLens(item)
      this.changeMode('grid')
    },
    // 选中
    handleSelect(item) {
      this.selectLensId = item.lensId
    },
    // 保存描述
    handleSaveDesc(item) {
      if (!item['lensDesc']) return
      saveLensDesc({
        lensId: item.lensId,
        lensDesc: item['lensDesc']
      }).then(res => {
        const { code, msg } = res.data
        code === 200 ? this.$baseMessage.success(msg || '保存成功') : this.$baseMessage.error(msg || '保存失败')
        // 成功之后输入框失焦
        this.$refs['desc' + item.lensId][0].blur()
      })
    },
    // 查看对话
    handleViewDialogue(item) {
      this.$refs.view.show(item)
    },
    // 格式化角色名称
    formatterRoleName(val) {
      if (!val) return ''
      const strArr = []
      val.forEach(item => {
        strArr.push(item.name)
      })
      return strArr.join('、')
    },
    // 初始化swiper
    initSwiper() {
      this.$nextTick(() => {
        // console.log(this.$refs, 7878)
        if (!this.$refs.swiper) return
        this.$refs.swiper.forEach((item, index) => {
          new Swiper(item, {
            // 循环模式
            loop: false,
            slidesPerView: 3,
            spaceBetween: 20,
            navigation: {
              nextEl: '.next-button' + index, // 下一页按钮
              prevEl: '.pre-button' + index // 上一页按钮
            }
          })
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.lens-content {
  overflow: auto;
  margin-top: 10px;
  .lens-item {
    background: #1D2129;
    color: $base-color-white;
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 12px;
    box-sizing: border-box;
    align-items: center;
    cursor: pointer;
    .item-left {
      flex: 1;
      .details {
        line-height: 25px;
        margin: 0;
        margin-bottom: 8px;
      }
      .view-dialogue {
        color: $base-color-default;
        cursor: pointer;
        font-style: normal;
        margin-left: 10px;
      }
    }
    .item-single-right {
      width: 300px;
      border-left: 1px solid #39414E;
      padding-left: 20px;
      margin-left: 20px;
      .item-single-image {
        width: 100%;
        border-radius: 8px;
        background: #39414E;
        overflow: hidden;
        aspect-ratio: $base-aspect-ratio-2;
        .item-single-content {
          max-width: 100%;
          max-height: 100%;
          border-radius: 8px;
          aspect-ratio: $base-aspect-ratio-1;
          &[data-ratio="2"] {
            aspect-ratio: $base-aspect-ratio-2;
          }
          &[data-ratio="3"] {
            aspect-ratio: $base-aspect-ratio-3;
          }
          &[data-ratio="4"] {
            aspect-ratio: $base-aspect-ratio-4;
          }
          &[data-ratio="5"] {
            aspect-ratio: $base-aspect-ratio-5;
          }
          &[data-ratio="6"] {
            aspect-ratio: $base-aspect-ratio-6;
          }
          &[data-ratio="7"] {
            aspect-ratio: $base-aspect-ratio-7;
          }
          &[data-ratio="8"] {
            aspect-ratio: $base-aspect-ratio-8;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .item-multi-right {
      width: 900px;
      border-left: 1px solid #39414E;
      padding-left: 20px;
      margin-left: 20px;
      position: relative;
      .swiper-slide {
        height: auto;
        background: #272C36;
        border: 1px solid transparent;
        cursor: pointer;
        aspect-ratio: $base-aspect-ratio-2;
        border-radius: 8px;
        .swiper-slide-image {
          max-width: 100%;
          max-height: 100%;
          aspect-ratio: $base-aspect-ratio-1;
          &[data-ratio="2"] {
            aspect-ratio: $base-aspect-ratio-2;
          }
          &[data-ratio="3"] {
            aspect-ratio: $base-aspect-ratio-3;
          }
          &[data-ratio="4"] {
            aspect-ratio: $base-aspect-ratio-4;
          }
          &[data-ratio="5"] {
            aspect-ratio: $base-aspect-ratio-5;
          }
          &[data-ratio="6"] {
            aspect-ratio: $base-aspect-ratio-6;
          }
          &[data-ratio="7"] {
            aspect-ratio: $base-aspect-ratio-7;
          }
          &[data-ratio="8"] {
            aspect-ratio: $base-aspect-ratio-8;
          }
          .image-item {
            width: 100%;
            height: 100%;
            border-radius: 8px;
          }
        }
      }
      .navigator {
        height: 40px;
        line-height: 40px;
        text-align: right;
        margin-top: 10px;
        margin-right: 10px;
        box-sizing: border-box;
        position: relative;
        .svg-icon {
          width: 22px;
          height: 22px;
          cursor: pointer;
          position: absolute;
          bottom: 10px;
          &:nth-child(1) {
            left: 42%;
          }
          &:nth-child(2) {
            right: 42%;
          }
        }
      }
    }
    &:hover {
      border-color: rgba(255,255,255,0.5);
    }
    &.active {
      border-color: $base-color-default;
    }
    //.svg-icon {
    //  cursor: move;
    //}
    .opera-button {
      cursor: pointer;
      color: #FFFFFF;
    }
  }
}
</style>
